<template>
  <div class="discussToest">
    <h1>111111111</h1>
    <div class="mui-input-row" style="margin: 10px 5px;">
      <textarea id="textarea" rows="5" placeholder="多行文本框" v-model="msg"></textarea>
    </div>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" @click="commtensgood">发表评论</button>

    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
      <li class="mui-table-view-cell" v-for="(item,i) in goodscomm" :key="i">
        <div class="mui-table">
          <div class="mui-table-cell mui-col-xs-10">
            <h5>第{{i+1}}楼 用户：{{item.user_name}} 发表时间：{{item.add_time|dateFormat}}</h5>
            <p class="gjhaha">{{item.content==="undefined"?"无输入":item.content}}</p>
          </div>
        </div>
      </li>
    </ul>

    <button type="button" class="mui-btn mui-btn-block" @click="getMore">加载更多</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      goodscomm: [],
      msg: ""
    };
  },
  created() {
    this.comments();
    this.commtensgood()
  },
  methods: {
    comments() {
      fetch(
        "http://www.liulongbin.top:3005/api/getcomments/" +
          this.$route.params.id +
          "?pageindex=" +
          this.page
      )
        .then(response => {
          if (response.status === 200) {
            return response.json();
          }
        })
        .then(res => {
          console.log(res);
          this.goodscomm = this.goodscomm.concat(res.message);
        });
    },
    getMore() {
      this.page++;
      this.comments();
    },
    commtensgood() {
     this.$http.post("http://www.liulongbin.top:3005/api/postcomment/"+this.$route.params.id,{content:this.msg.trim()}).then(res=>{
        //  console.log(res.body);
        if(res.body.status===0){
            let vm={
                user_name: "匿名用户",
                add_time:new Date(),
                content:this.msg.trim()
            };
            this.goodscomm.unshift(vm);
            this.msg=''
        }
         
     })
       
    }
  }
};
</script>
<style lang="less">
</style>
